<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-03 16:44:11
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-17 16:43:50
-->
<template>
  <el-scrollbar class="form-panel invoice-information">
    <el-form :model="params" class="demo-form-inline" ref="params" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.invoiceTitle')" prop="header">
            <el-input
              v-model="params.header"
              maxlength="50"
              clearable
              :placeholder="$t('certification.enterprise.invoiceTitlePlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.identificationCode')" prop="taxId">
            <el-input
              v-model="params.taxId"
              maxlength="50"
              clearable
              :placeholder="$t('certification.enterprise.identificationCodePlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.bank')" prop="openingBankName">
            <el-input
              v-model="params.openingBankName"
              maxlength="50"
              clearable
              :placeholder="$t('certification.enterprise.bankPlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.bankNumber')" prop="openingBankNumber">
            <el-input
              v-model="params.openingBankNumber"
              maxlength="50"
              clearable
              :placeholder="$t('certification.enterprise.bankNumberPlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.bankAccount')" prop="openingBankAccount">
            <el-input
              v-model="params.openingBankAccount"
              maxlength="50"
              clearable
              :placeholder="$t('certification.enterprise.bankAccountPlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.registrationTelephone')" prop="registrationPhone">
            <el-input
              v-model="params.registrationPhone"
              maxlength="50"
              clearable
              :placeholder="$t('certification.enterprise.registrationTelephonePlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.registeAdrress')" prop="registrationAddress">
            <el-input
              v-model="params.registrationAddress"
              maxlength="200"
              clearable
              :placeholder="$t('certification.enterprise.addressInputPlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.invoiyouceMailingAddress')" prop="invoiceMailingAddress">
            <el-input
              v-model="params.invoiceMailingAddress"
              maxlength="200"
              clearable
              :placeholder="$t('certification.enterprise.mailingAddressPlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>
<script>
  import { cloneDeep } from '@package/utils'
  import { apiPostAddInvoice, apiGetInvoice, apiPostUpdateInvoice } from '../api'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'InvoiceInformation',
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      },
      supplierId: {
        type: String
      }
    },
    data() {
      return {
        params: {
          header: '',
          taxId: '',
          openingBankNumber: '',
          registrationPhone: '',
          openingBankName: '',
          openingBankAccount: '',
          registrationAddress: '',
          invoiceMailingAddress: ''
        },
        rules: {
          header: [
            { required: true, message: this.$t('certification.enterprise.invoiceTitlePlaceholder'), trigger: 'blur' }
          ],
          taxId: [
            {
              required: true,
              message: this.$t('certification.enterprise.identificationCodePlaceholder'),
              trigger: 'blur'
            }
          ],
          openingBankNumber: [
            { required: true, message: this.$t('certification.enterprise.bankNumberPlaceholder'), trigger: 'blur' }
          ],
          registrationPhone: [
            {
              required: true,
              message: this.$t('certification.enterprise.registrationTelephonePlaceholder'),
              trigger: 'blur'
            }
          ],
          openingBankName: [
            { required: true, message: this.$t('certification.enterprise.bankPlaceholder'), trigger: 'blur' }
          ],
          openingBankAccount: [
            { required: true, message: this.$t('certification.enterprise.bankAccountPlaceholder'), trigger: 'blur' }
          ],
          registrationAddress: [
            { required: true, message: this.$t('certification.enterprise.addressInputPlaceholder'), trigger: 'blur' }
          ],
          invoiceMailingAddress: [
            { required: true, message: this.$t('certification.enterprise.mailingAddressPlaceholder'), trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      supplierId: {
        handler(val) {
          if (val) {
            this.getDetail()
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      async getDetail() {
        const { data } = await apiGetInvoice(this.supplierId)
        this.params = Object.assign(this.params, cloneDeep(data))
      },
      handleVaildForm() {
        return new Promise((resolve) => {
          this.$refs.params.validate((valid) => {
            resolve(valid)
          })
        })
      },
      onSumit(isVaild = true) {
        return new Promise(async (resolve, reject) => {
          const isSubmit = !isVaild || (await this.handleVaildForm())
          if (isSubmit) {
            const param = {
              ...this.params,
              supplierId: this.supplierId
            }
            try {
              const { data, code } =
                'id' in this.params ? await apiPostUpdateInvoice(param) : await apiPostAddInvoice(param)
              if (EnumApiCode.Success === code) {
                // this.getDetail()
                resolve(data)
              } else {
                reject()
              }
            } finally {
              reject()
            }
          } else {
            reject()
          }
        })
      }
    }
  }
</script>
